<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="password"><span></span><br>
    重复密码：<input type="text" id="password2"><span></span><br>
    <input type="button" value="登录" id="btn">
</body>
<script>

// 1.用户名           用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
// 2.密码的规则       数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
// 3.重复密码         跟第一次输入 密码一致
// 4.提交按钮的时候，   判断所有输入数据是否符合。符合跳转，否，不跳

    var oum = document.getElementById("username");
    var opd = document.getElementById("password");
    var opd2 = document.getElementById("password2");
    var obtn = document.getElementById("btn");

    // 提前假设每个输入框对应的状态，方便将来提交时，做统一验证
    var umFlag = pdFlag = pd2Flag = false;

    // 用户名验证
    oum.onblur = function(){
        var reg = /^[\w\-\u2e80-\u9fff]{4,20}$/;

        if(reg.test(this.value)){
            this.nextElementSibling.innerHTML = "符合";
            umFlag = true;
        }else{
            this.nextElementSibling.innerHTML = "不符合，请输入中文、字母、数字、“-”“_”的组合，4-20个字符"
            umFlag = false;
        }
    }

    opd.onblur = function(){
        var a=b=c=0;

        // 判断是否存在数字
        var numReg = /\d+/;
        if(numReg.test(this.value)){
            a = 1;
        }
        // 判断是否存在字母
        var azReg = /[a-zA-Z]+/;
        if(azReg.test(this.value)){
            b = 1;
        }
        // 判断是否存在特殊
        var tsReg = /[^\da-zA-Z]+/;
        if(tsReg.test(this.value)){
            c = 1;
        }

        switch(a+b+c){
            case 1:this.nextElementSibling.innerHTML = "简单";break;
            case 2:this.nextElementSibling.innerHTML = "一般";break;
            case 3:this.nextElementSibling.innerHTML = "困难";break;
        }

        // 因为密码没有失败情况，所以直接将pdFlag设置为true
        pdFlag = true;

        // 为了优化用户体验，在输入密码时，如果重复密码不为空
        if(opd2.value === "") return;
        // 就进行重复密码的验证
        if(this.value === opd2.value){
            opd2.nextElementSibling.innerHTML = "一致";
            pd2Flag = true;
        }else{
            opd2.nextElementSibling.innerHTML = "不一致";
            pd2Flag = false;
        }
    }

    opd2.onblur = function(){
        if(this.value === opd.value){
            this.nextElementSibling.innerHTML = "一致";
            pd2Flag = true;
        }else{
            this.nextElementSibling.innerHTML = "不一致";
            pd2Flag = false;
        }
    }


    obtn.onclick = function(){
        // 判断所有输入框的状态，全部为true才为成功
        if(umFlag && pdFlag && pd2Flag){
            alert("成功");
        }else{
            // 思考：准确提示哪个输入框失败了
            alert("失败");
        }
    }
    
</script>
</html>